<template>
  <view>
		<u-notice-bar mode="horizontal" :speed="50" :text="list"></u-notice-bar>
    <LuckyWheel
      ref="myLucky"
      width="600rpx"
      height="600rpx"
      :blocks="blocks"
      :prizes="prizes"
      :buttons="buttons"
      :defaultStyle="defaultStyle"
      @start="startCallBack"
      @end="endCallBack"
    />
		<u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
  import LuckyWheel from '@/components/@lucky-canvas/uni/lucky-wheel.vue'
  export default {
    components: { LuckyWheel },
    data () {
      return {
				isOnce:true,
				list: '抽大奖！',
        blocks: [{ padding: '13px', background: '#617df2' }],
        prizes: [
          { range:10,fonts: [{ text: '1.00', top: '10%' }], background: '#e9e8fe' },
          { range:10,fonts: [{ text: '6.66', top: '10%' }], background: '#b8c5f2' },
          { range:10,fonts: [{ text: '9.99', top: '10%' }], background: '#e9e8fe' },
          { range:10,fonts: [{ text: '21.00', top: '10%' }], background: '#b8c5f2' },
          { range:10,fonts: [{ text: '52.00', top: '10%' }], background: '#e9e8fe' },
          { range:10,fonts: [{ text: '18.88', top: '10%' }], background: '#b8c5f2' },
					{ range:10,fonts: [{ text: '13.14', top: '10%' }], background: '#e9e8fe' },
					{ range:10,fonts: [{ text: '0.10', top: '10%' }], background: '#b8c5f2' },
					{ range:10,fonts: [{ text: '66.66', top: '10%' }], background: '#e9e8fe' },
					{ range:10,fonts: [{ text: '8.88', top: '10%' }], background: '#b8c5f2' },
        ],
        buttons: [
          { radius: '50px', background: '#617df2' },
          { radius: '45px', background: '#afc8ff' },
          {
            radius: '40px', background: '#869cfa',
            pointer: true,
            fonts: [{ text: '开始', top: '-15px',fontColor:"#fff" }],
						// imgs:[{src:"https://tva1.sinaimg.cn/large/e6c9d24ely1gzggiuti87j20u0140qcv.jpg",width:"60px",height:"60px",top:"-30px"}]
          },
        ],
      }
    },
    methods: {
			 
      // 点击抽奖按钮触发回调
      startCallBack () {
				if(this.isOnce){
					// 先开始旋转
					this.$refs.myLucky.play()
					// 使用定时器来模拟请求接口
					this.isOnce = false
					setTimeout(() => {
					  // 调用stop停止旋转并传递中奖索引
					  this.$refs.myLucky.stop()
					}, 3000)
				}else{
					this.$refs.uToast.show({
						message:"只能抽一次！",
						type:"error"
					})
				}
      },
      // 抽奖结束触发回调
      endCallBack (prize) {
        // 奖品详情
        console.log(prize)
				this.$refs.uToast.show({
					message:"恭喜您抽中了"+prize.fonts[0].text+'元大奖',
					type:"success"
				})
      }
    }
  }
</script>